<script setup lang="ts">
/**
 * @desc ServiceMailTo
 * @author DragonTeam <https://www.bpmport.com>
 * @since 2024/11/7 13:54
 */

import { Mail } from 'lucide-vue-next'
import type { PropType } from 'vue'
import { computed } from 'vue'

import type { BaseNode } from '@/types'

defineOptions({ name: 'ServiceMailTo' })

const $props = defineProps({
  node: {
    type: Object as PropType<BaseNode>,
    required: true,
  },
})
const doEmit = defineEmits(['update:node'])
const vModelNode = computed<BaseNode>({
  get: () => $props.node,
  set: val => doEmit('update:node', val),
})

const mailTo = computed<any[]>({
  get: () => vModelNode.value.businessData.mailTo as any[] || [],
  set: val => vModelNode.value.businessData.mailTo = val,
})
const subject = computed<string>({
  get: () => vModelNode.value.businessData.subject as string,
  set: val => vModelNode.value.businessData.subject = val,
})
const mailContent = computed<string>({
  get: () => vModelNode.value.businessData.mailContent as string,
  set: val => vModelNode.value.businessData.mailContent = val,
})
</script>

<template>
  <a-collapse-item key="ServiceMailTo">
    <template #header>
      <Mail :size="16" />
      邮件任务
    </template>

    <EditItem label="收件人">
      <user-tag-input v-model:data="mailTo" />
    </EditItem>

    <EditItem label="邮件主题">
      <validate-input v-model="subject" />
    </EditItem>

    <EditItem label="邮件内容">
      <validate-textarea v-model="mailContent" />
    </EditItem>
  </a-collapse-item>
</template>
